<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div
        class="swiper-slide"
        v-for="(prods, index) in computeArrList"
        :key="index"
      >
        <div class="swiper-slide-content">
          <div class="prod-info" v-for="(prod, index) in prods" :key="index">
            <div
              class="brand-img"
              v-lazy:background-image="bgImage(prod.brandUrl)"
              @click="handleBrandClick(prod)"
            ></div>
            <div
              class="prod-item"
              v-for="(item, index) in prod.productList"
              :key="index"
              @click="handleDetailClick(item)"
            >
              <div
                class="prod-img"
                v-lazy:background-image="bgImage(item.productImage)"
              ></div>
              <div class="prod-name">
                <span class="ft10">{{ item.productDesc }}</span>
              </div>
              <div class="prod-price">
                <span class="price-prefix">¥</span>
                <span class="price">{{ item.price }}</span>
                <span class="tag-price"
                  ><span class="ft10">¥{{ item.underlinePrice }}</span></span
                >
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="dot-wrap">
      <span
        class="dot"
        :class="{ 'dot-active': index == activeIndex }"
        v-for="(dot, index) in computeArrList"
        :key="index"
      ></span>
    </div>
  </div>
</template>

<script>
import Swiper from '../utils/swiper.js';
import '../css/swiper.css';

export default {
  name: 'popularBrand',
  data() {
    return {
      computeArrList: [],
      activeIndex: 0,
      dataList: [
        {
          brandUrl:
            'https://akmer.aikucun.com/mshop/6b7c2911f819000a69e48a0d0b16a4e56761fa58_1589008053531_84.jpg',
          productList: [
            {
              productNo: 123456677,
              productName: 'aaaa',
              productDesc: '商品描述',
              productImage:
                'https://akmer.aikucun.com/mshop/6b7c2911f819000a69e48a0d0b16a4e56761fa58_1589008053531_84.jpg',
              price: 100,
              underlinePrice: 150
            },
            {
              productNo: 123456677,
              productName: 'aaaa',
              productDesc: '商品描述',
              productImage:
                'https://akmer.aikucun.com/mshop/6b7c2911f819000a69e48a0d0b16a4e56761fa58_1589008053531_84.jpg',
              price: 100,
              underlinePrice: 150
            },
            {
              productNo: 123456677,
              productName: 'aaaa',
              productDesc: '商品描述',
              productImage:
                'https://akmer.aikucun.com/mshop/6b7c2911f819000a69e48a0d0b16a4e56761fa58_1589008053531_84.jpg',
              price: 100,
              underlinePrice: 150
            }
          ]
        },
        {
          brandUrl:
            'https://akmer.aikucun.com/mshop/6b7c2911f819000a69e48a0d0b16a4e56761fa58_1589008053531_84.jpg',
          productList: [
            {
              productNo: 123456677,
              productName: 'aaaa',
              productDesc: '商品描述',
              productImage:
                'https://akmer.aikucun.com/mshop/6b7c2911f819000a69e48a0d0b16a4e56761fa58_1589008053531_84.jpg',
              price: 100,
              underlinePrice: 150
            },
            {
              productNo: 123456677,
              productName: 'aaaa',
              productDesc: '商品描述',
              productImage:
                'https://akmer.aikucun.com/mshop/6b7c2911f819000a69e48a0d0b16a4e56761fa58_1589008053531_84.jpg',
              price: 100,
              underlinePrice: 150
            },
            {
              productNo: 123456677,
              productName: 'aaaa',
              productDesc: '商品描述',
              productImage:
                'https://akmer.aikucun.com/mshop/6b7c2911f819000a69e48a0d0b16a4e56761fa58_1589008053531_84.jpg',
              price: 100,
              underlinePrice: 150
            }
          ]
        },
        {
          brandUrl:
            'https://akmer.aikucun.com/mshop/6b7c2911f819000a69e48a0d0b16a4e56761fa58_1589008053531_84.jpg',
          productList: [
            {
              productNo: 123456677,
              productName: 'aaaa',
              productDesc: '商品描述',
              productImage:
                'https://akmer.aikucun.com/mshop/6b7c2911f819000a69e48a0d0b16a4e56761fa58_1589008053531_84.jpg',
              price: 100,
              underlinePrice: 150
            },
            {
              productNo: 123456677,
              productName: 'aaaa',
              productDesc: '商品描述',
              productImage:
                'https://akmer.aikucun.com/mshop/6b7c2911f819000a69e48a0d0b16a4e56761fa58_1589008053531_84.jpg',
              price: 100,
              underlinePrice: 150
            },
            {
              productNo: 123456677,
              productName: 'aaaa',
              productDesc: '商品描述',
              productImage:
                'https://akmer.aikucun.com/mshop/6b7c2911f819000a69e48a0d0b16a4e56761fa58_1589008053531_84.jpg',
              price: 100,
              underlinePrice: 150
            }
          ]
        },
        {
          brandUrl:
            'https://akmer.aikucun.com/mshop/6b7c2911f819000a69e48a0d0b16a4e56761fa58_1589008053531_84.jpg',
          productList: [
            {
              productNo: 123456677,
              productName: 'aaaa',
              productDesc: '商品描述',
              productImage:
                'https://akmer.aikucun.com/mshop/6b7c2911f819000a69e48a0d0b16a4e56761fa58_1589008053531_84.jpg',
              price: 100,
              underlinePrice: 150
            },
            {
              productNo: 123456677,
              productName: 'aaaa',
              productDesc: '商品描述',
              productImage:
                'https://akmer.aikucun.com/mshop/6b7c2911f819000a69e48a0d0b16a4e56761fa58_1589008053531_84.jpg',
              price: 100,
              underlinePrice: 150
            },
            {
              productNo: 123456677,
              productName: 'aaaa',
              productDesc: '商品描述',
              productImage:
                'https://akmer.aikucun.com/mshop/6b7c2911f819000a69e48a0d0b16a4e56761fa58_1589008053531_84.jpg',
              price: 100,
              underlinePrice: 150
            }
          ]
        },
        {
          brandUrl:
            'https://akmer.aikucun.com/mshop/6b7c2911f819000a69e48a0d0b16a4e56761fa58_1589008053531_84.jpg',
          productList: [
            {
              productNo: 123456677,
              productName: 'aaaa',
              productDesc: '商品描述',
              productImage:
                'https://akmer.aikucun.com/mshop/6b7c2911f819000a69e48a0d0b16a4e56761fa58_1589008053531_84.jpg',
              price: 100,
              underlinePrice: 150
            },
            {
              productNo: 123456677,
              productName: 'aaaa',
              productDesc: '商品描述',
              productImage:
                'https://akmer.aikucun.com/mshop/6b7c2911f819000a69e48a0d0b16a4e56761fa58_1589008053531_84.jpg',
              price: 100,
              underlinePrice: 150
            },
            {
              productNo: 123456677,
              productName: 'aaaa',
              productDesc: '商品描述',
              productImage:
                'https://akmer.aikucun.com/mshop/6b7c2911f819000a69e48a0d0b16a4e56761fa58_1589008053531_84.jpg',
              price: 100,
              underlinePrice: 150
            }
          ]
        },
        {
          brandUrl:
            'https://akmer.aikucun.com/mshop/6b7c2911f819000a69e48a0d0b16a4e56761fa58_1589008053531_84.jpg',
          productList: [
            {
              productNo: 123456677,
              productName: 'aaaa',
              productDesc: '商品描述',
              productImage:
                'https://akmer.aikucun.com/mshop/6b7c2911f819000a69e48a0d0b16a4e56761fa58_1589008053531_84.jpg',
              price: 100,
              underlinePrice: 150
            },
            {
              productNo: 123456677,
              productName: 'aaaa',
              productDesc: '商品描述',
              productImage:
                'https://akmer.aikucun.com/mshop/6b7c2911f819000a69e48a0d0b16a4e56761fa58_1589008053531_84.jpg',
              price: 100,
              underlinePrice: 150
            },
            {
              productNo: 123456677,
              productName: 'aaaa',
              productDesc: '商品描述',
              productImage:
                'https://akmer.aikucun.com/mshop/6b7c2911f819000a69e48a0d0b16a4e56761fa58_1589008053531_84.jpg',
              price: 100,
              underlinePrice: 150
            }
          ]
        }
      ]
    };
  },
  computed: {
    computeArrList2() {
      const rowNum = 3;
      const arr = [];
      let minArr = [];
      this.dataList.forEach(item => {
        if (minArr.length === rowNum) {
          minArr = [];
        }
        if (minArr.length === 0) {
          arr.push(minArr);
        }
        minArr.push(item);
      });
      this.initSwiper();
      return arr;
    }
  },
  methods: {
    bgImage(imgUrl) {
      if (imgUrl) {
        imgUrl = `${imgUrl}?x-oss-process=image/resize,w_115`;
        return imgUrl;
      }
      return '';
    },
    onSwipeChange() {
      // todo
    },
    handleBrandClick(obj) {
      this.$emit('goBrand', obj);
    },
    handleDetailClick(obj) {
      this.$emit('goProductDetail', obj);
    },
    initSwiper() {
      const self = this;
      // eslint-disable-next-line no-undef
      new Swiper('.swiper-container', {
        pagination: {
          el: '.swiper-pagination'
        },
        effect: 'cube', // 翻页效果：方块
        grabCursor: true,
        cubeEffect: {
          shadow: false
        },
        observer: true,
        observeParents: true,
        on: {
          slideChange() {
            self.activeIndex = this.activeIndex;
          }
        }
      });
    }
  },
  mounted() {
    const rowNum = 3;
    const arr = [];
    let minArr = [];
    this.dataList.forEach(item => {
      if (minArr.length === rowNum) {
        minArr = [];
      }
      if (minArr.length === 0) {
        arr.push(minArr);
      }
      minArr.push(item);
    });
    this.computeArrList = arr;
    this.initSwiper();
  }
};
</script>

<style lang="scss" scoped>
.swiper-container {
  width: 355px;
  height: 351px;
  border-radius: 0 0 4px 4px;
  position: relative;
  margin: 0 auto;
}
.swiper-slide {
  width: 100%;
  height: 328px;
  background-color: #fff;
}
.dot-wrap {
  width: 100%;
  height: 27px;
  position: absolute;
  bottom: 0;
  left: 0;
  text-align: center;
  z-index: 10;
  background: rgba(253, 50, 114, 1);
  border-radius: 0 0 4px 4px;
  display: flex;
  align-items: center;
  justify-content: center;

  .dot {
    width: 5px;
    height: 5px;
    display: inline-block;
    background: rgba(255, 255, 255, 1);
    opacity: 0.5;
    border-radius: 50%;
    margin-right: 3px;
  }

  .dot-active {
    width: 20px;
    height: 5px;
    display: inline-block;
    background: #ffffff;
    border-radius: 3px;
    opacity: 1;
  }
}
.swiper-slide-content {
  width: 100%;
  height: 100%;
  background-color: #fff;

  .prod-info {
    width: 100%;
    display: flex;
    border-bottom: 1px solid rgba(224, 206, 206, 1);
  }
  .brand-img {
    width: 88px;
    height: 108px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border-right: 1px solid #e0cece;
  }
  .prod-item {
    width: 78px;
    height: 108px;
    padding: 0 5px;
    border-right: 1px solid #e0cece;
    &:last-child {
      border-right: none;
    }
  }
  .prod-img {
    width: 78px;
    height: 70px;
    margin-top: 5px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
  }
  .prod-name {
    width: 78px;
    font-size: 12px;
    color: #595959;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: break-all;
    margin: 2px 0 0;
  }
  .prod-price {
    display: flex;
    color: #ff0000;
    align-items: baseline;
    font-size: 10px;
    font-family: PingFangSC-Regular;
    margin-top: -6px;
    .price-prefix {
      font-family: PingFangSC-Medium;
      font-weight: 500;
    }
    .price {
      font-size: 15px;
      font-weight: 500;
      color: #ff0000;
      font-family: PingFangSC-Medium;
    }
    .tag-price {
      font-size: 10px;
      text-decoration: line-through;
      margin-left: 4px;
      color: #b4b4b4;
    }
  }
}
</style>
